<div
  class="m-grid__item m-grid__item--fluid m-grid m-grid--desktop m-grid--ver-desktop m-grid--hor-tablet-and-mobile m-login m-login--6"
  id="m_login"
>
  <div
    class="m-grid__item   m-grid__item--order-tablet-and-mobile-2 m-grid m-grid--hor m-login__aside"
    style="background-image: url(assets/app/media/img/bg/bg-4.jpg);"
  >
    <div class="m-grid__item">
      <div class="m-login__logo">
        <a href="#">
          <img src="/api/profile/logo" />
        </a>
      </div>
    </div>
 
    <div class="m-grid__item m-grid__item--fluid m-grid m-grid--ver">
      <div class="m-grid__item m-grid__item--middle" *ngIf="profile$ | async as profile">
        <span class="m-login__title">{{ profile?.name }}</span>
        <span class="m-login__subtitle"></span>
      </div>
    </div>

    <div class="m-grid__item">
      <div class="m-login__info">
        <div class="m-login__section">
          <a href="javascript:;" class="m-link">
            2020 Copyright © 统信软件技术有限公司 版权所有
          </a>
        </div>
        <!-- <div class="m-login__section">
					<a href="javascript:;" class="m-link">Privacy</a>
					<a href="javascript:;" class="m-link">Legal</a>
					<a href="javascript:;" class="m-link">Contact</a>
				</div> -->
      </div>
    </div>
  </div>

  <div
    class="m-grid__item m-grid__item--fluid  m-grid__item--order-tablet-and-mobile-1 m-login__wrapper"
  >
    <!--begin::Head-->
    <div class="m-login__head">
      <a class="g-pointer mr-3" (click)="dialog.open(resetRef)">重置管理员密码</a>
      <a class="g-pointer" (click)="dialog.open(forgetRef)">忘记密码?</a>
      <!-- <span translate="AUTH.GENERAL.NO_ACCOUNT">忘记密码？请联系管理员</span> -->
      <!-- <a href="javascript:;" class="m-link m--font-danger" translate="AUTH.GENERAL.SIGNUP_BUTTON">Sign Up</a> -->
    </div>
    <!--end::Head-->

    <!--begin::Body-->
    <div class="m-login__body">
      <div class="m-login__signin ng-star-inserted">
        <div class="m-login__title">
          <h3>用户登录</h3>
        </div>
        <div class="alert alert-danger" *ngIf="form.errors as errors" [ngSwitch]="true">
          <span *ngSwitchCase="errors.auth">
            账户或密码错误
          </span>
          <span *ngSwitchCase="errors.locked">
            账户或密码输入次数超限，请十五分钟后再尝试。
          </span>
          <span *ngSwitchDefault>
            网络错误，请稍后再试
          </span>
        </div>
        <form class="m-login__form" [formGroup]="form" (ngSubmit)="login()">
          <div class="form-group">
            <label for="username">用户名</label>
            <input id="username" type="text" class="form-control" formControlName="username" />
          </div>
          <div class="form-group">
            <label for="password">密码</label>
            <input id="password" type="password" class="form-control" formControlName="password" />
          </div>
          <button class="btn btn-primary px-5" [disabled]="form.errors">登录</button>
        </form>
      </div>
    </div>
    <!--end::Body-->
  </div>
</div>

<ng-template #forgetRef>
  <section>
    <header class="modal-header">
      忘记密码
    </header>
    <main class="modal-body">
      <div>
        <h3>忘记密码? 请联系管理员</h3>
      </div>
    </main>
  </section>
</ng-template>

<ng-template #resetRef>
  <section>
    <header class="modal-header">
      重置超级管理员密码
    </header>
    <main class="modal-body">
      <form id="resetForm" [formGroup]="resetForm" (ngSubmit)="reset()">
        <div class="form-group">
          <label for="token">密码重置口令</label>
          <input id="token" type="text" class="form-control" formControlName="token" />
        </div>
        <div class="form-group">
          <label for="new-password">新密码</label>
          <input
            id="new-password"
            type="password"
            class="form-control"
            autocomplete="new-password"
            formControlName="password"
          />
        </div>
        <div class="form-group">
          <label for="confirm">密码确认</label>
          <input
            id="confirm"
            type="password"
            class="form-control"
            autocomplete="new-password"
            formControlName="confirm"
          />
        </div>
      </form>
    </main>
    <footer class="modal-footer">
      <button form="resetForm" class="btn btn-danger">重置</button>
    </footer>
  </section>
</ng-template>
